.vc-customize (
  @color-primary: #508AFD, // 主色
  @colo-bg-gradual: linear-gradient(to right, #3769EE, #3694F2), // 渐变色
  @color-primary-subs: #F1F7FF, // 辅助色
  @color-current-bg: #EBF4FF, // 当前选中项的背景色
  @color-tree-icon: #BFDDFF // 树列表默认图标颜色
) {

  /*
   * 颜色
   */
  @color-success: #58D299; // 用于成功、完成
  @color-success-subs: #EFFBF5; // 用于成功、完成（辅助色）
  @color-warning: #FBA85F; // 用于提醒
  @color-warning-subs: #FFF5EA; // 用于提醒（辅助色）
  @color-danger: #FF7575; // 用于警告、重要提醒
  @color-danger-subs: #FFF2F2; // 用于警告、重要提醒（辅助色）
  @color-default: #4DA6FF; // 用于运行中、正常
  @color-default-subs: #DFE5EE; // 用于运行中、正常（辅助色）
  @color-purple: #907CFA; // （辅助色）
  @color-green: #31C7B2; // （辅助色）
  @color-yollow: #FBD439; // （辅助色）
  @color-pink: #EF6BCE; // （辅助色）

  @color-disabled: #DFE5EE; // 禁用按钮、描边色
  @color-bg-content: #F8F9FD; // 系统背景色
  @color-striped: #FBFCFE; // 隔行换色色
  @color-selected: #F1F7FF; // 列表选中色、白色菜单选中色、下拉菜单选中色

  /*
   * 文字
   */
  // 主标题
  .font-title {
    color: #444444;
    font-size: 16px;
  }

  // 正文
  .font-content {
    color: #444444;
    font-size: 14px;
  }

  // 表头
  .font-thead {
    color: #818181;
    font-size: 14px;
  }

  // 提示文字
  .font-tips {
    color: #A4AEBB;
    font-size: 14px;
  }

  // 失效文字
  .font-invalid {
    color: #C6CDD5;
    font-size: 14px;
  }

  // 链接文字
  .font-link {
    color: @color-primary;
    font-size: 14px;
  }

  // 提示文字
  .font-error {
    color: @color-danger;
    font-size: 12px;
  }

  /*
   * 按钮
   */
  // 少于3个字
  .btn-few-words {
    padding: 7px 20px;
    font-size: 14px;
  }

  // ≥3个字
  .btn-multi-words {
    padding: 7px 12px;
    font-size: 14px;
  }
  
  // 文字按钮
  .btn-text-only {
    padding: 0 !important;
    font-size: 14px;
  }

  /*
   * 文字超出省略显示
   */
  // 超出1行显示...
  .text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  // 超出2行显示...
  .text-ellipsis-row2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /*
   * 去除选中效果
   */
  .no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
  
  /*
   * 滚动条
   */
  .scrollbar {
    overflow: auto;

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background-color: rgba(0, 0, 0, 0.2);
    }

    &::-webkit-scrollbar-track {
      border-radius: 6px;
      background-color: rgba(0, 0, 0, 0);
    }
  }

  /*
   * 字体颜色相关样式
   */
  .color-primary {
    color: @color-primary;
  }

  .color-danger {
    color: @color-danger;
  }

  /*
   * 背景色相关样式
   */
  .bg-primary {
    background: @color-primary;
  }

  .bg-primary-subs {
    background: @color-primary-subs;
  }

  /*
   * 对齐方式相关样式
   */
  .align-left {
    text-align: left;
  }

  .align-right {
    text-align: right;
  }

  .align-center {
    text-align: center;
  }

  // 当前选中项样式
  .is-selected {
    color: @color-primary;
    background-color: @color-current-bg;
  }

  /*
   * 自定义
   */
  @color: #444444;
  @font-size: 14px;
  @border: 1px solid #DFE9E8;
  @border-dialog: 1px solid #DFE5EE;
  @border-box: 1px solid #E4E7ED;
  @border-radius: 3px;
  @box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

  /*
   * 列表页
   */
  .vc-page {

    // 查询条件
    .vc-search {
      min-height: 30px;
      margin-bottom: 12px;
      padding: 14px;
      border: @border;
      border-radius: @border-radius;
      background: #fff;

      &>div:not(.el-row) {
        height: 100%;
        min-width: 100%;

        &:after {
          content: '\20';
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
          overflow: hidden;
        }

        &[shortest] {
          width: calc(100% + 88px);
          margin-left: -88px;

          &>span {
            width: 40px;
          }
        }

        &[short] {
          width: calc(100% + 73px);
          margin-left: -73px;

          &>span {
            width: 55px;
          }
        }

        &[shorter] {
          width: calc(100% + 58px);
          margin-left: -58px;

          &>span {
            width: 70px;
          }
        }

        width: calc(100% + 43px);
        margin-left: -43px;

        &>span {
          width: 85px;
        }

        &[longer] {
          width: calc(100% + 28px);
          margin-left: -28px;

          &>span {
            width: 100px;
          }
        }

        &[long] {
          width: calc(100% + 13px);
          margin-left: -13px;

          &>span {
            width: 115px;
          }
        }
      }

      .el-col {
        margin-top: 10px;
        padding: 0 !important;
        display: flex;
        justify-content: flex-end;

        &.el-col-6 {
          &:nth-child(-n+4) {
            margin-top: 0;
          }
        }

        &.el-col-8 {
          &:nth-child(-n+3) {
            margin-top: 0;
          }
        }

        &>span {
          line-height: 30px;
          margin-right: 8px;
          display: inline-block;
          text-align: right;
        }

        &>.vc-search-input {
          width: calc(100% - 128px);

          .el-input__inner {
            height: 30px !important;
            line-height: 30px !important;
          }
        }

        &.vc-search-btn {
          &:not(.expand) {
            margin-top: 0 !important;
          }

          float: right;

          .el-button--text {
            padding-right: 5px !important;
            font-size: 12px;

            i {
              margin-left: 3px;
            }
          }
        }
      }
    }

    // 查询条件和列表之间的按钮
    .vc-btns {
      width: 100%;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
    }

    // 列表
    .vc-table {
      border-radius: @border-radius;
      background: #fff;
      &:not(.vc-table--border) {
        border: @border;
        .el-table {
          .el-table__header th {
            position: relative;
            &:not(:nth-last-child(2)):after {
              content: '';
              position: absolute;
              right: 0;
              top: calc(50% - 11.5px);
              width: 1px;
              height: 23px;
              background: #DFE5EE;
            }
          }
        }
        .el-table--border {
          border: none !important;
          td, th {
            border-right: none;
          }
        }
      }
      &.vc-table--border {
        .el-pagination {
          width: calc(100% - 2px) !important;
          border: @border;
          border-top: none;
          border-radius: 0 0 @border-radius @border-radius;
        }
      }

      &.no-empty-block {
        .el-table .el-table__body-wrapper .el-table__empty-block {
          height: 0 !important;
          min-height: 0 !important;
          border-bottom: none !important;
        }
      }

      // 表格
      .el-table {
        border-radius: @border-radius @border-radius 0 0;

        &::before,
        &.el-table--border::after,
        &.el-table--group::after {
          display: none;
        }

        &.el-table--small {
          font-size: @font-size;

          th, td {
            padding: 3px 0;
          }
        }

        thead>tr>th.el-table-column--selection,
        tbody>tr>td.el-table-column--selection {
          text-align: center !important;
        }

        .cell {
          padding: 0 10px;
        }

        td.link-col {
          .cell {
            color: @color-primary;
            .link-btn {
              cursor: pointer;
            }
          }
        }

        i.vc-icon.fix-icon {
          position: relative;
          top: -1px;
          font-size: 12px;
        }

        i.vc-icon:not(.fix-icon) {
          color: @color-primary;
          background: transparent;
          border-radius: 3px;
          font-size: 20px;
          cursor: pointer;

          &:not(:first-child) {
            margin-left: 13px;
          }

          &:hover {
            color: #fff;
            background: @color-primary;
          }

          &.is-disabled, &.is-disabled:hover {
            color: @color-disabled !important;
            background: transparent !important;
            cursor: not-allowed !important;
          }
        }

        .el-button--text {
          padding: 0 !important;
        }
      }

      // 分页
      .el-pagination {
        width: 100%;
        padding: 6px 0;
        text-align: right;
        font-weight: normal;

        .el-pager li {
          font-size: 12px !important;

          &.number {
            min-width: 0;
            width: 22px;
            height: 22px;
            line-height: 22px;
            margin: 3px 10px;
            padding: 0;

            &.active {
              border-radius: 11px;
              color: #fff;
              background: @color-primary;
            }
          }
        }

        .btn-next {
          margin-right: 5px !important;
        }
      }
    }
  }

  /*
   * 左侧树 + 右侧列表
   */
  .vc-page-parts {
    height: calc(100% - 30px);
    display: flex;
    justify-content: space-between;

    // 左侧树
    .part-left {
      width: 218px;
      height: 100%;
      margin-right: 15px;
      background: #fff;
      border: @border;
      border-radius: @border-radius;

      .tree-title {
        height: 39px;
        line-height: 40px;
        text-align: left;
        padding: 0 16px;
        border-bottom: @border;
        display: flex;
        justify-content: space-between;

        i {
          color: @color-primary;
          font-size: 14px;
          cursor: pointer;
        }
      }

      .vc-search-input {
        width: calc(100% - 20px);
        margin: 10px auto;
      }
      
      .vc-search-input + .org-tree {
        height: calc(100% - 40px - 52px) !important;
      }

      .org-tree {
        width: 100%;
        height: calc(100% - 40px);
        display: inline-block !important;
        .scrollbar;

        .is-current>.el-tree-node__content:first-child {
          background-color: @color-current-bg;
          color: @color-primary;
          font-weight: 400;

          .vc-icon:not(.vc-icon-more) {
            color: @color-primary  !important;
          }
        }

        .el-tree-node__content {
          height: 34px;
          line-height: 34px;
          padding-right: 5px;

          .el-tree-node__label {
            width: calc(100% - 24px);
            text-align: left;
            .text-ellipsis;
          }

          .el-tree-node__expand-icon {
            margin-left: 7px;
          }

          .slot-tree {
            position: relative;
            width: calc(100% - 38px);
            flex: 1;
            display: flex;
            align-items: center;

            i {
              margin-right: 4px;
            }

            span {
              width: calc(100% - 20px);
              text-align: left;
              .text-ellipsis;
            }
          }

          .slot-scope {
            position: relative;
            width: calc(100% - 38px);
            flex: 1;
            display: flex;
            align-items: center;

            span:first-child {
              width: calc(100% - 20px);
              text-align: left;
              .text-ellipsis;
            }

            .vc-icon-more {
              position: absolute;
              right: 0;
              font-size: 16px;
              color: #aaa;
              font-weight: normal;
            }
          }
        }

        .vc-icon {
          font-size: 14px;
          color: @color-tree-icon;
        }
      }
    }

    // 右侧列表
    .part-right {
      width: calc(100% - 235px);
      height: 100%;
      padding: 15px 15px 15px 0;
      margin: -15px -15px -15px 0;
      .scrollbar;
    }
  }

  /*
   * 详情信息
   */
  .vc-detail-info {
    padding-bottom: 10px;
    .title {
      height: 54px;
      padding-left: 20px;
      display: flex;
      align-items: center;
      border-bottom: @border;
      font-size: 16px;
    }
    .title-bg {
      height: 30px;
      display: flex;
      align-items: center;
      background-color: #EBEEF5;
      font-size: 16px;
      .icon {
        width: 3px;
        height: 12px;
      }
      span {
        margin-left: 8px;
      }
    }
    .title + .el-row, .title-bg + .el-row {
      margin-top: 10px;
    }
    .el-row {
      &:first-of-type {
        margin-top: 10px;
      }
      .el-col {
        line-height: 20px;
        margin: 10px 0;
        display: flex;
        align-items: center;
        &.label {
          justify-content: flex-end;
          color: #818181;
          padding-right: 20px;
        }
        &:not(.label) {
          text-align: left;
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
          i {
            font-size: 14px;
          }
          &.multi-cols {
            display: block;
            div {
              width: 100%;
              min-height: 20px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }

  /*
   * 弹出框
   */
  .vc-dialog-form,
  .vc-dialog-table {
    text-align: center;
    white-space: nowrap;

    &:after {
      content: '';
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }

    .el-dialog {
      display: inline-block;
      vertical-align: middle;
      text-align: left;
      white-space: normal;
      margin: 20px 0 !important;
      border-radius: 4px;

      .el-dialog__header {
        padding: 20px;
        border-bottom: @border-dialog;
      }

      .el-dialog__body {
        padding: 20px;

        .el-form {
          padding-right: 20px;

          .el-form-item.el-form-item--small {
            margin-bottom: 20px !important;
          }

          .el-form-item .show-password .el-input__inner {
            padding-right: 50px;
          }

          .el-form-item .el-textarea__inner {
            resize: none;
            .scrollbar;
          }
        }
      }

      .el-dialog__footer {
        padding: 20px;
        border-top: @border-dialog;
        text-align: right;
      }
    }

    &.append-to-body {
      font-family: 'Microsoft YaHei';
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 14px;
      color: @color;

      .el-main {
        min-height: 200px;
        padding: 0;
      }
    }
  }
  .vc-dialog-form {
    .el-dialog {
      .el-dialog__body {
        padding: 40px 60px 20px;
      }
    }
  }

  /*
   * 选人组件
   */
  .selectBox.tree-dialog-form {
    .box {
      .el-icon-search {
        cursor: pointer;
        &:hover {
          color: @color-primary;
        }
      }
    }
    .tree-dialog .org-tree {
      .is-current>.el-tree-node__content:first-child {
        background-color: @color-current-bg;
        font-weight: 400;
      }
    }
    .vc-icon {
      font-size: 14px;
      color: @color-tree-icon;
    }
  }

  /*
   * 操作菜单
   */
  .menu-handle-right {
    position: fixed;
    min-width: 100px;
    height: auto;
    margin: 0;
    padding: 5px 0;
    border: @border-box;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: @box-shadow;
    text-align: left;
    z-index: 10;

    li {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      list-style: none;
      cursor: pointer;

      &:hover,
      &:focus {
        background-color: @color-primary-subs;
        color: @color-primary;
        outline: none;
      }
    }
  }
  
  .vc-form-text {
    height: 30px;
    line-height: 30px;
    background-color: #F1F3F6;
    border: 1px solid #DFE5EE;
    color: #818181;
    border-radius: 4px;
    padding: 0 15px;
    cursor: not-allowed;
  }

  button, i {
    .no-select;
  }

  i {
    outline: none !important;
  }

  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
  }

  /*
   * 修改element-ui组件默认样式
   */
  .v-modal {
    opacity: 0.2 !important;
  }

  .el-button--small:not(.el-button--text):not(.is-plain) {
    &:not(.multi-words) {
      .btn-few-words !important;
    }

    &.multi-words {
      .btn-multi-words !important;
    }
  }

  .el-date-editor--date {
    .el-input__inner {
      padding-left: 15px !important;
    }

    .el-input__prefix {
      display: none !important;
    }

    .el-input__suffix {
      width: 25px !important;
      height: 32px !important;
    }

    .el-input__suffix-inner .el-input__icon {
      font-family: element-icons !important;
      speak: none;
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: baseline;
      display: inline-block;
      -webkit-font-smoothing: antialiased;

      &:not(.el-icon-circle-close):before {
        content: "\E608" !important;
      }
    }
  }

  .el-tooltip__popper {
    max-width: 600px !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    font-size: 14px !important;
    border-radius: 3px !important;

    &.is-dark {
      background: @color  !important;
      color: #fff !important;
    }

    &.is-light {
      padding: 14px 20px !important;
      color: @color  !important;
      background: #fff !important;
      border: @border-dialog  !important;
      box-shadow: 0 5px 10px 0 rgba(186, 206, 220, 0.30) !important;

      .popper__arrow {
        border-top-color: @color-default-subs  !important;
        border-bottom-color: @color-default-subs  !important;

        &::after {
          border-top-color: #fff !important;
          border-bottom-color: #fff !important;
        }
      }
    }
  }

  .vc-page .el-tabs:not(.el-tabs--border-card) {
    &.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
    &.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
    &.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
    &.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
      padding-left: 0 !important;
    }
    &.el-tabs--bottom .el-tabs__item.is-bottom:last-child, 
    &.el-tabs--bottom .el-tabs__item.is-top:last-child, 
    &.el-tabs--top .el-tabs__item.is-bottom:last-child, 
    &.el-tabs--top .el-tabs__item.is-top:last-child {
      padding-right: 0 !important;
    }
  }

  .el-message {
    padding: 22px 30px !important;
    z-index: 3000 !important;
  }

  .el-message-box {
    padding-bottom: 15px !important;
  }

  .el-select-dropdown__item.selected {
    font-weight: 400 !important;
  }

  .el-textarea.scrollbar textarea {
    .scrollbar;
  }

  .el-tooltip {
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
  }

  .popper-lower {
    z-index: 9 !important;
  }
}
